<template>
    <div class="goodslist">
        <yd-list theme="5" class="loadList" slot="list">
            <div class="cartList" v-for="(item, index) in list" :key="index">
                <div class="cartList_img" v-if="cartChannel == 1">
                    <img v-if="item.goodsImage" :src="imgUrl+item.goodsImage" alt="">
                </div>
                <div class="cartList_img" v-else>
                    <img v-if="item.goodsImage" :src="item.goodsImage" alt="">
                </div>
                <div class="cartList_box">
                    <div class="cartList_tit">{{item.goodsName}}</div>
                    <div class="cartList_color" v-if="cartChannel == 1">
                        <span v-if="item.chooseGoodsSpec=='N;'">规格：默认</span>
                        <span v-else>规格：{{item.chooseGoodsSpec}}</span>
                    </div>
                    <div class="cartList_color" v-else>
                        <span v-if="item.chooseGoodsSpec==''">规格：默认</span>
                        <span v-else>规格：{{item.chooseGoodsSpec}}</span>
                    </div>
                    <div class="cartList_money">
                        <b>￥</b>
                        <yd-countup v-if="item.goodsPrice" :endnum="item.goodsPrice" duration="0.1" decimals="2" separator=","></yd-countup>
                    </div>
                </div>
                <span class="spinner" v-if="cartChannel == 1">
                    <span style="font-size:12px">x</span>{{item.goodsNum}}
                </span>
                <span class="spinner" v-else>
                    <span style="font-size:12px">x</span>{{item.spinner}}
                </span>
            </div>
        </yd-list>
        <div class="dangerBtn">
            <yd-button style="margin-top:0.3rem" size="large" @click.native="dangerBtn" type="danger">确认清单 共{{cartChannelLength}}件</yd-button>
        </div>
    </div>
</template>
<script>

export default {
    name: 'goodslist',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            list: [],
            cartChannelLength: 0,
            cartChannel: ''
        }
    },
    created: function() {
        this.cartChannel = this.$route.query.shop || '1';
        if (this.cartChannel == '2') {
            this.list = this.$store.state.imglist;
            this.cartChannelLength = this.$store.state.imglist[0].spinner;
        } else {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'cart/list?selected=1')
                .then((response) => {
                    if (response.status == 200) {
                        for (var i = 0; i < response.data.object.length; i++) {
                            this.cartChannelLength += response.data.object[i].goodsNum;
                        }
                        this.list = response.data.object;
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        }
    },
    methods: {
        dangerBtn() {
            this.$router.go(-1);
        }
    }
}
</script>
<style  scoped>
.cartList {
    width: 100%;
    height: 2.6rem;
    padding: 0.3rem 0.2rem;
    overflow: hidden;
    color: #4a4a4a;
    font-size: 14px;
    position: relative;
}

.spinner {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    color: #ef4f4f;
    font-size: 18px;
}

.cartList:after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.cartList_tit {
    width: 100%;
    padding-top: 0.2rem;
    height: 0.8rem;
    line-height: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.cartList_color {
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #777;
}

.cartList_money {
    font-size: 16px;
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    color: #ef4f4f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartList_money b {
    font-weight: 400;
    font-size: 12px;
}

.cartList_color span:nth-of-type(1) {
    margin-right: 0.2rem;
}

.cartList_img {
    width: 2rem;
    height: 2rem;
    float: left;
}

.cartList_img img {
    width: 100%;
    min-height: 100%;
}

.cartList_box {
    float: left;
    width: calc(100% - 2.6rem);
    box-sizing: border-box;
    padding-left: 0.2rem;
    height: 100%;
}

.dangerBtn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.25rem;
    height: auto;
    overflow: hidden;
}
</style>